<template>
    <div>
        <h2>
            <select name="" id="">
                <option value="">请选择</option>
                <option :value="item.code" v-for="item in provinces" :key="item.code">{{item.name}}</option>
            </select>
        </h2>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>住址</td>
                    <td>照片</td>
                    <td>生日</td>
                    <td>手机号</td>
                </tr>
                <tr v-for="item in students" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.gender?"男":"女"}}</td>
                    <td>{{item.hometown}}</td>
                    <td>
                        <img :src="item.photo" width="100" height="100"/>
                    </td>
                    <td>{{moment(item.birthday).format("YYYY-MM-DD hh:mm:ss")}}</td>
                    <td>{{item.phone.substring(0,3)+"****"+item.phone.substring(7)}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import { ref, reactive } from 'vue'

let students = ref([
    {
        id:1,
        name: '张三',
        age: 16,
        gender: 0,
        hometown: '广东省',
        photo:
            'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2004-09-20T11:32:09.244927',
        phone:"12345678978",
    },
    {
        id:2,
        name: '李四',
        age: 17,
        gender: 1,
        hometown: '河北省', photo:
            'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2004-10-22T11:32:09.244927',
        phone:"12345678978",
    },
    {
        id:3,
        name: '王五',
        age: 18,
        gender: 1,
        hometown: '福建省',
        photo:
            'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2005-09-25T11:32:09.244927',
        phone:"12345678978",
    },
    {
        id:4,
        name: '马六',
        age: 19,
        gender: 0,
        hometown: '河南省',
        photo:
            'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
        birthday: '2006-01-25T11:32:09.244927',
        phone:"12345678978",
    },
])

const provinces =ref([
{ name: '北京市', code: '110000' },
{ name: '天津市', code: '120000' },
{ name: '河北省', code: '130000' },
{ name: '山西省', code: '140000' },
{ name: '内蒙古自治区', code: '150000' },
{ name: '辽宁省', code: '210000' },
{ name: '吉林省', code: '220000' },
{ name: '黑龙江省', code: '230000' },
{ name: '上海市', code: '310000' },
{ name: '江苏省', code: '320000' },
{ name: '浙江省', code: '330000' },
{ name: '安徽省', code: '340000' },
{ name: '福建省', code: '350000' },
{ name: '江西省', code: '360000' },
{ name: '山东省', code: '370000' },
{ name: '河南省', code: '410000' },
{ name: '广西壮族自治区', code: '450000' },
    ])
</script>

<style scoped></style>